<template>
  <div>
    <Charts :option="chartOption" style="height: 400px;"></Charts>
  </div>
</template>

<script type="text/ecmascript-6">
import Charts  from '../../components/Charts'
import request from '../../utils/request'
// import {random} from 'lodash'
import axios from 'axios'
export default {
  name: '',
  components: {
    Charts
  },
  data() {
    return {
      chartOption: {}
    }
  },
  mounted() {
    this.getChartData()
    this.interval = setInterval(() => {
      // this.chartOption.series[0].data = this.chartOption.series[0].data.map(() => random(100))
      // this.chartOption = {...this.chartOption}
      this.getChartData()
    }, 3000)
  },
  beforeDestroy() {
    clearInterval(this.interval)
  },
  methods: {
    getChartData() {
      request({
        url: "/api/dashboard/chart",
        method: "get",
        params: { ID: 12345 }
      }).then(response => {
        this.chartOption = {
          title: {
            text: "ECharts 入门示例"
          },
          tooltip: {},
          xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
          },
          yAxis: {},
          series: [
            {
              name: "销量",
              type: "bar",
              data: response.data
            }
          ]
        };
      });
    },
    getChartData2() {
      axios.get('/api/dashboard/chart', {params: {ID: 12345 }}).then(res => {
        this.chartOption = {
          title: {
            text: "ECharts 入门示例"
          },
          tooltip: {},
          xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
          },
          yAxis: {},
          series: [
            {
              name: "销量",
              type: "bar",
              data: res.data
            }
          ]
        }
      })
    }
  }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus"></style>
